<template>
        <div class="loginbox">
            <div class="login">
                <form>
                    <div class="logo"></div>
                    <div class="login_form">
                        <div class="user">
                            <input class="text_value"  v-model="username" type="text" placeholder="用户名">
                            <input class="text_value"  v-model="password" type="password" placeholder="密码">
                        </div>
                        <a @click="login" class="button">登录</a>
                    </div>
                    <div id="tip"></div>
                    <div class="foot">
                    </div>
                </form>
            </div>
        </div>
</template>

<script>
    import axios from "axios";
    export default{
        data(){
            return {
                username:"",
                password:""
            }
        },
        methods:{
            login(){
                let params={
                    username:this.username,
                    password:this.password
                }
                axios.post(this.GLOBAL_.apiUrl+"10060",JSON.stringify(params)).then(
                    res=>{
                        if(res.data.code==2){
                            this.$message.error("登陆失败");
                        }else if(res.data.code==1){
                            localStorage.setItem("token",res.data.data);
                            this.$message.success("登陆成功",1).then(
                                ()=>{this.$router.push("/categorylist")}
                            )
                        }
                        
                    }
                )
            }
        }
    }
</script>

<style scoped lang="less">
    @import "../../assets/css/base.css";
    @import "../../assets/css/login.css";

    .loginbox {
        width: 100%;
        height: 100%; 
        overflow: hidden; 
        margin: 0; 
        font-family: 'microsoft yahei';
        background-image:url(../../assets/images/login_bg.jpg); 
        display:flex;
        justify-content: center;
        align-items: center;
    }
.login { 
    margin-top:300px;
    margin-bottom:200px;

    width:640px; 
    height:400px;  
    
    // margin-left:-320px; 
    // margin-top:-200px;
}
.logo { background-image:url(../../assets/images/admin_logo.png); background-repeat:no-repeat; background-position: 30px center; height:150px;}
.login_form { height:80px; margin-left:auto; margin-right:auto; width:600px;}
.login_form .user{ background-image:url(../../assets/images/login_name_bg.jpg); width:540px; height:80px; float:left;}
.login_form .button { background:url(../../assets/images/login_button.jpg); width:50px; background-repeat:no-repeat; background-position:left center; height:54px; float:left; display:block; text-indent: -9999px; border:none; margin-top:10px; position:relative}
.login_form .text_value { float:left; margin-left:35px; padding-left:10px; padding-right:10px; margin-top:15px; width:225px; height:50px; line-height:50px; font-size:16px; color:#666; font-weight:bold; border:none; background-color:#f5f6f7}
.foot { padding-top:30px; text-align:center; color:#FFF; padding-right:80px;}
#tip { padding-top:10px; color:#FFF;   background-image:none; text-align:center; padding-right:80px; font-size:14px;}
</style>